<template>
  <div class="common-layout">
    <el-container>
      <!-- 添加班级信息 -->
      <el-dialog
        v-model="dialog.visible"
        :title="$t('class.NeueKlasseerstellen')"
        width="400px"
        append-to-body
        @close="closeDialog"
      >
        <!-- 班级名称 -->
        <el-form
          ref="classfrom"
          label-width="90px"
          label-position="top"
          :rules="rules"
          :model="ClassData"
        >
          <el-form-item :label="$t('class.Klassenname') + '：'" prop="name">
            <el-input
              v-model="ClassData.name"
              :placeholder="$t('class.BitteKlassennamen')"
            />
          </el-form-item>
          <!-- 年级信息 -->
          <el-form-item :label="$t('class.Sorte') + '：'" prop="grade">
            <el-input
              v-model="ClassData.grade"
              :placeholder="$t('class.BitteNote')"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button v-throttle="submit" type="primary" :loading="loading">{{
              $t("class.konservieren")
            }}</el-button>
            <el-button v-throttle="closeDialog">{{
              $t("class.zurück")
            }}</el-button>
          </div>
        </template>
      </el-dialog>
      <!-- 修改班级信息 -->
      <el-dialog
        v-model="dialog2.visible"
        :title="$t('class.Klasseninformationenändern')"
        width="400px"
        append-to-body
        @close="closeDialog2"
      >
        <!-- 班级名称 -->
        <el-form
          ref="modifyfrom"
          label-width="90px"
          label-position="top"
          :rules="rules"
          :model="modifyData"
        >
          <el-form-item :label="$t('class.Klassenname') + '：'" prop="name">
            <el-input
              v-model="modifyData.name"
              :placeholder="$t('class.Klassennameändern')"
            />
          </el-form-item>
          <!-- 年级信息 -->
          <el-form-item :label="$t('class.Klassenname') + '：'" prop="grade">
            <el-input
              v-model="modifyData.grade"
              :placeholder="$t('class.Gradändern')"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button
              v-throttle="modifysubmit"
              type="primary"
              :loading="loading2"
              >{{ $t("class.modifizieren") }}</el-button
            >
            <el-button @click="closeDialog2">{{
              $t("class.zurück")
            }}</el-button>
          </div>
        </template>
      </el-dialog>

      <!--  主题表格信息 -->
      <el-main class="main">
        <el-card shadow="never">
          <template #header>
            <div
              v-hasPerm="['courseinfo:class:add']"
              class="flex justify-between btnc"
            >
              <!-- 这里填写操作 -->
              <el-button
                class="addcalss"
                plain
                style="color: var(--el-color-primary)"
                @click="openDialog"
              >
                <svg-icon
                  icon-class="classadd"
                  style="margin-right: 5px; font-size: 24px"
                />
                {{ $t("class.NeueKlasse") }}
              </el-button>
            </div>
          </template>
          <!-- 列表 -->
          <div class="tableto">
            <el-table
              v-loading="tabloading"
              border
              :data="classList"
              :empty-text="$t('class.DerzeitKlasseninformationen')"
            >
              <el-table-column
                key="id"
                :label="$t('class.KlasseID')"
                align="center"
                prop="id"
              />
              <el-table-column
                key="name"
                :label="$t('class.Klassenname')"
                align="center"
                prop="name"
              >
                <template #default="scope">
                  <el-tag class="ml-2">
                    {{ scope.row.name }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column
                key="num"
                :label="$t('class.Klassengröße')"
                align="center"
                prop="num"
              >
                <template #default="scope">
                  <el-tag class="ml-2">
                    {{ scope.row.num }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column
                key="grade"
                :label="$t('class.Sorte')"
                align="center"
                prop="grade"
              >
                <template #default="scope">
                  <el-tag class="ml-2">
                    {{ scope.row.grade }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column :label="$t('class.Betrieb')" align="center">
                <!-- 这里填写操作 -->
                <template #default="scope">
                  <el-button
                    v-throttle="() => editclass(scope.row.id)"
                    v-hasPerm="['courseinfo:class:edit']"
                    type="primary"
                    link
                    size="small"
                    ><i-ep-edit />{{ $t("class.modifizieren") }}</el-button
                  >
                  <el-button
                    v-throttle="() => deleteclass(scope.row.id)"
                    v-hasPerm="['courseinfo:class:delete']"
                    type="danger"
                    size="small"
                    link
                    ><el-icon> <Delete /> </el-icon
                    >{{ $t("class.löschen") }}</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <pagination
              v-if="total > 0"
              v-model:total="total"
              v-model:page="GClassData.pageNum"
              v-model:limit="GClassData.pageSize"
              @pagination="getclassinfo"
            />
          </div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "Class",
  inheritAttrs: false,
});

import SvgIcon from "@/components/SvgIcon/index.vue";
import { useAppStore } from "@/store/modules/app";
import {
  AddClass,
  DeleteClass,
  ModifyClass,
  getClassePage,
  ModifyViewClass,
} from "@/api/class/index";
import {
  ClassDataFrom,
  ClassPageVO,
  ClassQuery,
  deleteClassDataFrom,
  modifyClassDataFrom,
} from "@/api/class/types";
import { useCourseStore } from "@/store/modules/course";

const courseStore = useCourseStore();
const courseId = ref();
const appStore = useAppStore();
const classfrom = ref(ElForm); // 创建表单
const modifyfrom = ref(ElForm); // 修改表单
const loading = ref(false); // 创建
const loading2 = ref(false); // 修改
const tabloading = ref(false);
const classList = ref<ClassPageVO[]>();
const total = ref(0);
// 获取班级请求数据
const GClassData = reactive<ClassQuery>({
  pageNum: 1,
  pageSize: 10,
});
// 提交表单数据
const ClassData = reactive<ClassDataFrom>({});
// 修改班级请求数据
const modifyData = reactive<modifyClassDataFrom>({});
// 删除班级请求数据
const deleteData = reactive<deleteClassDataFrom>({});
// 提交与修改表单规则
const rules = reactive({
  name: [{ required: true, message: "班级名称不能为空", trigger: "blur" }],
  grade: [{ required: true, message: "年级信息不能为空", trigger: "blur" }],
});
// 创建弹窗组件
const dialog = reactive<DialogOption>({
  visible: false,
});
// 修改弹窗组件
const dialog2 = reactive<DialogOption>({
  visible: false,
});
// 获取当前课程班级信息函数
function getclassinfo() {
  tabloading.value = true;
  getClassePage(GClassData, courseId.value)
    .then(({ data }) => {
      classList.value = data.list; // 获取班级列表
      total.value = data.total; // 获取班级条数
    })
    .catch((error) => {
      console.log(error);
    })
    .finally(() => {
      tabloading.value = false;
    });
}
// 创建班级信息函数
function submit() {
  classfrom.value.validate((valid: boolean) => {
    if (valid) {
      loading.value = true;
      AddClass(ClassData, courseId.value)
        .then(() => {
          dialog.visible = false; // 关闭弹窗
          getclassinfo(); // 重新加载班级信息
          ElMessage({
            message: "添加班级信息成功!",
            type: "success",
          });
        })
        .finally(() => {
          loading.value = false;
        });
    }
  });
}
// 修改班级信息函数
function editclass(id: number) {
  modifyData.classId = id; // 获取班级id
  ModifyViewClass(id).then(({ data }) => {
    modifyData.name = data.name;
    modifyData.grade = data.grade;
  });
  openDialog2(); // 打开弹窗信息
}
// 修改班级信息函数
function modifysubmit() {
  modifyfrom.value.validate((valid: boolean) => {
    if (valid) {
      loading2.value = true;
      ModifyClass(modifyData, courseId.value)
        .then(() => {
          dialog2.visible = false; // 关闭弹窗
          getclassinfo(); // 重新加载班级信息
          ElMessage({
            message: "修改班级信息成功!",
            type: "success",
          });
        })
        .finally(() => {
          loading2.value = false;
        });
    }
  });
}
// 删除班级信息函数
function deleteclass(id: number) {
  deleteData.classId = id;
  //请求接口
  ElMessageBox.confirm("确认删除此班级?该操作不可逆！", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(function () {
    DeleteClass(deleteData)
      .then(() => {
        getclassinfo(); // 重新加载班级信息
        ElMessage({
          message: "删除班级成功!",
          type: "success",
        });
      })
      .finally(() => {});
  });
}
// 重置表单
function init() {
  // 重置表单
  ClassData.name = "";
  ClassData.grade = "";
  // 修改重置
  modifyData.name = "";
  modifyData.grade = "";
}
// 打开弹窗信息
function openDialog() {
  dialog.visible = true;
  dialog.title = "创建新班级";
}
// 关闭弹窗信息
function closeDialog() {
  dialog.visible = false;
  init(); // 创建重置
}
// 修改打开弹窗
function openDialog2() {
  dialog2.visible = true;
  dialog2.title = "修改班级信息";
}
// 修改关闭弹窗
function closeDialog2() {
  dialog2.visible = false;
  init(); //重置
}

onMounted(() => {
  courseId.value = courseStore.courseId;
  getclassinfo();
  // 隐藏展板
  appStore.sidebar.opened = false;
});
</script>

<style lang="scss" scoped>
.btnc {
  position: relative;
  height: 18px;
}

.addcalss {
  position: absolute;
  right: 0;
  bottom: -50%;
}
</style>
